<template>
  <div>
    <el-card class="box-card">
      <!-- 查询表单 -->
      <el-form ref='searchRef' class='searchForm' :model="queryData" >
        <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item prop='tags'>
          <span class='formText'>标签名称</span><el-input  v-model="queryData.tags" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        <el-col :span="6">
          <el-form-item prop='province'>
           <span class='formText'>城市</span> <el-cascader
            v-model="queryData.province"
            :options="cityData"
            :props='props'
            @change="handleChange1(queryData.province)"></el-cascader> 
          </el-form-item></el-col>
        <el-col :span="6">
           <el-form-item prop='city'>
           <span class='formText'>地区</span> <el-cascader
            v-model="queryData.city"
            :options="citys"
            :props='props'></el-cascader></el-form-item></el-col>
        <el-col :span="6">
          <el-form-item prop='shortName'>
           <span class='formText'>企业简称</span><el-input  v-model="queryData.shortName" ></el-input></el-form-item>
           </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item prop='state'>
           <span class='formText' style='text-indent: 2em'>状态</span> <el-select placeholder="请选择" v-model="queryData.state">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option> </el-select></el-form-item></el-col>
        <el-col :span="6">
          <el-button size='small' @click='resetForm'>清除</el-button>
          <el-button type="primary" size='small' @click='searchBtn'>搜索</el-button></el-col>
  
      <!-- 新增按钮 -->
      <el-col :span='12'>
      <el-button  class='addComBtn' type="success" icon="el-icon-edit" size='small' @click='dialogVisible = true' >新增用户</el-button>
      </el-col>
      </el-row>
      </el-form>
      <!-- 显示总条数 -->
        <el-alert
          type="info"
          show-icon
          :closable='false'>
          <template slot='title'> 共 {{ total }} 条数据</template>
        </el-alert>
        <!-- 企业列表 -->
        <template>
          <el-table
            :data='comData'
            border
            style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="number"
              label="企业编码"
              align="center">
            </el-table-column>
            <el-table-column
              prop="shortName"
              label="企业简称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="tags"
              label="标签"
              align="center">
            </el-table-column>
            <el-table-column
              prop="creatorID"
              label="创建者"
              align="center">
            </el-table-column>
            <el-table-column
              label="创建日期"
              align="center"
             >
             <template  slot-scope="scope">{{ scope.row.addDate }}</template> 
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注"
              align="center">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              align="center">
              <template slot-scope="scope">
                <span v-if='scope.row.state == 0'>启用</span>
                <span v-else>禁用</span>
                 </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="280"
              ><template slot-scope="scope">
                <div class='icon'><i class="el-icon-edit" @click='editCom(scope.row)'></i></div>
              <div class='icon error' v-if='scope.row.state == 0' >   <el-tooltip class="item" effect="dark" content="禁用" placement="top">
               <i class="el-icon-close" @click='eidtState(scope.row)'>
           
              </i></el-tooltip>
              </div>
              <div class='icon success' v-else>
                 <el-tooltip class="item" effect="dark" content="启用" placement="top">
              <i class="el-icon-check" @click='eidtState(scope.row)'>
              </i>
               </el-tooltip>
              </div>
                 <div class='icon'><i class="el-icon-delete" @click='removeCom(scope.row)'></i></div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="queryData.pagesize"
            layout=" prev, pager, next, sizes, jumper"
            :total="total">
          </el-pagination>
        </template>
    </el-card>
    <!-- 新增企业页面 -->
    <el-dialog
      @close='closeForm'
      center
      title="创建用户"
      :visible.sync="dialogVisible"
      width="50%">
     <el-form :model="addComForm" :rules="addComFormRules" ref="addComFormRef" label-width="150px"  class="demo-ruleForm">
      <el-form-item label="企业名称" prop="shortName" >
        <el-input v-model="addComForm.shortName" style="width: 660px;"></el-input>
        <div>
        <template>
          <el-checkbox v-model="addComForm.isFamous">是否为名企</el-checkbox>
        </template>
        </div>
      </el-form-item>
      <el-form-item label="所属公司" prop='company' >
        <el-input v-model="addComForm.company" style="width: 660px;"></el-input>
        <div style="margin: 15px 0;">https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
      </el-form-item>
      <el-form-item label="城市"  prop='province'>
        <el-cascader
            style="width: 130px;"
            v-model="addComForm.province"
            :options="cityData"
            :props='props'
            @change="handleChange1(addComForm.province)"></el-cascader>
        <el-cascader
            style="width: 130px;"
            v-model="addComForm.city"
            :options="citys"
            :props='props'></el-cascader>
      </el-form-item>
      <el-form-item label="方向（企业标签）" prop='tags' >
        <el-input v-model="addComForm.tags" style="width: 660px;"></el-input>
      </el-form-item>
      <el-form-item label="备注"  prop='remarks'>
        <el-input
          style="width: 660px;"
          type="textarea"
          placeholder="请输入"
          v-model="addComForm.remarks">
        </el-input>
      </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer" >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCom">确 定</el-button>
      </span>
    </el-dialog>
    <companysAdd ref='companysAdd' :titleInfo='titleInfo' :formBase='editComForm'></companysAdd>
  </div>
</template>

<script>
import companysAdd from '../components/companys-add'
import { list, add, disabled, remove } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { parseTime } from '@/filters/index.js'
export default {
  data () {
    return {
      comData: [],
      total: 0,
      queryData: {
        page: 1,
        pagesize: 5,
        province: '',
        tags: '',
        city: '',
        shortName: '',
        state: null
      },
      cityData: [],
      props: {
        lazwbel: 'label',
        value: 'value'
      },
      citys: [],
      options: [{
        value: 1,
        label:'启用'
      },
      {
        value: 0,
        label:'禁用'
      }],
      dialogVisible: false,
      addComForm: {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      editComForm: {

      },
      addComFormRules: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请输入标签', trigger: 'blur' }
        ]
      },
      titleInfo: {
        text: '编辑',
        pageTitle: '用户'
      }
    }
  },
  components: {
    companysAdd
  },
  computed: {

  },
  created () {
    this.getComList()
    this.cityData = provinces().map(item=> {
        return {label: item, value: item}
    })
  },

  methods: {
    // 获取列表
    async getComList () {
      const res =  await list({
        page: this.queryData.page,
        pagesize: this.queryData.pagesize,
        province: this.queryData.province[0],
        tags: this.queryData.tags,
        city: this.queryData.city[0],
        shortName: this.queryData.shortName,
        state: this.queryData.state
        }
      )
      if (res.status !== 200) this.$message.error('获取失败')
      this.total = res.data.counts
      this.comData = res.data.items
    },
    handleSizeChange (newSize) {
      this.queryData.pagesize = newSize
      this.getComList()
    },
    handleCurrentChange (num) {
      this.queryData.page = num
      this.getComList()
    },
    handleChange1 (value) {
      this.citys = citys(value[0]).map(item => {
        return {label: item, value: item}
    })
    },
    searchBtn () {
      this.getComList()
    },
    closeForm () {
      this.$refs.addComFormRef.resetFields()
    },
    addCom () {
      this.$refs.addComFormRef.validate(async flag => {
        if (!flag) return 
        const province1 = this.addComForm.province[0]
        const city1 = this.addComForm.city[0]
        try {
        const res = await add({
        isFamous: this.addComForm.isFamous,
        shortName: this.addComForm.shortName,
        company: this.addComForm.company,
        province: province1,
        city: city1,
        tags: this.addComForm.tags,
        remarks: this.addComForm.remarks
        })
        if (res.status !== 200) this.$message.error('新增失败')
        this.getComList()
        console.log(res)
        } catch (err) {
          console.log(err)
        }
      
        this.dialogVisible = false
      })
    },
    eidtState (row){
      this.$confirm('已成功启用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           if (row.state == 0) {
            row.state = 1
          }else {
            row.state = 0
          }
          this.$message({
            type: 'success',
            message: '已成功启用!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          }) 
        })
    },
    removeCom (row) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await remove({
            id: row.id
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
   
      this.getComList()
    },
    editCom (row) {
      this.$refs.companysAdd.dialogFormVisible = true
      this.editComForm = row
    },
    resetForm () {
      this.$refs.searchRef.resetFields()
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  .searchForm {
    .el-input, .el-cascader, .el-select {
      width: 380px;
    }
  }
  .formText {
    display: block;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    float: left;
    height: 46px;
    line-height: 36px;
    padding-right: 10px;
  }
  .el-cascader {
    width: 120px;
  }
  .el-select {
    width: 120px;
  }
  .addComBtn {
    float: right;
    margin: 20px 0 10px 0;
  }
  .el-alert {
    margin-bottom: 10px;
  }
  .el-form-item__label {
    text-align: right;
    margin-left: 150px;
  }
  .searchCom {
    margin: 10px !important;
  }
  .el-pagination {
    float: right;
    margin: 20px 0 ;
  }
  .icon {
    // float: left;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    border: 1px solid red;
    margin: 0 5px;
  }
  .icon:nth-child(1) {
    color: #409eff;
    background-color: #ecf5ff;
    border-color: #b3d8ff;
    cursor: pointer;
  }
  .icon:nth-child(1):hover {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }
    .error {
    color: #e6a23c;
    background-color: #fdf6ec;
    border-color: #f5dab1;
    cursor: pointer;
  }
  .error:hover {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff  ;
  }
    .icon:nth-child(3) {
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fbc4c4;
    cursor: pointer;
  }
  .icon:nth-child(3):hover {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
  .success {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
    cursor: pointer;
  }
  .success:hover {
    background-color: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}
</style>
